<template>
  <div class="wrap">
    <div class="content" v-loading="loading">

      <div class="form-box">
        <div class="form-title">{{$t('logistics.默认送达时间设置')}}：</div>
        <div style="margin-left: 30px; margin-top: 10px;">
          <div style="display: inline-block;">送达时间：</div>
          <div style="display: inline-block;">
            <el-input
              v-model="settingForm.deliveryTime"
              autocomplete="off"
              style="width: 150px"
              @input="handleInput"
            >
              <template slot="append">时</template>
            </el-input>
          </div>
        </div>
        <div style="font-size: 12px; color: #7F7F7F; margin-top: 10px; margin-left: 110px;">
          快递发货类型包裹递达买家预计所需的小时数，从打印面单之时开始起算
        </div>
      </div>

      <div class="form-box">
        <div class="form-title">{{$t('logistics.物流商设置')}}：</div>
        <div>
          <el-table
            v-loading="loading"
            :data="data"
            border
          >
            <el-table-column
              prop="logistics_type"
              :label="$t('logistics.物流商')"
              align="center"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              :label="$t('logistics.账号')"
              align="center"
              min-width="120"
            >
              <template slot-scope="{row}">
                <template v-if="row.logistics_type === 'FedEx'">
                  {{row.fedex_account_number}}
                </template>
                <template v-if="row.logistics_type === 'iMile'">
                  {{row.iMile_customer_id}}
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="pick_type"
              :label="$t('logistics.取件类型')"
              align="center"
              min-width="120"
            >
              <template slot-scope="{row}">
                <template v-if="row.pick_type === 1">{{ $t('logistics.自行投递') }}</template>
                <template v-if="row.pick_type === 2">{{ $t('logistics.请求取件') }}</template>
                <template v-if="row.pick_type === 3">{{ $t('logistics.定期取件') }}</template>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              :label="$t('logistics.状态')"
              align="center"
              min-width="120"
            >
              <template slot-scope="{row}">
                <template v-if="row.status === 1">{{ $t('logistics.启用') }}</template>
                <template v-else>{{ $t('logistics.停用') }}</template>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('logistics.操作')"
              align="center"
              min-width="120"
            >
              <template slot-scope="{row}">
                <template v-if="row.logistics_type === 'FedEx'">
                  <span style="cursor: pointer; color: #0099ff;" @click="saveData(row)">{{$t('logistics.编辑')}}</span>
                </template>
                <template v-if="row.logistics_type === 'iMile'">
                  <span style="cursor: pointer; color: #0099ff;" @click="saveIMileData(row)">{{$t('logistics.编辑')}}</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="form-box">
        <div class="form-title">物流查询设置:</div>
        <div class="form-item">
          <div class="form-label">TRACK718 API KEY：</div>
          <div class="form-input">
            <el-input v-model="settingForm.track718Key"></el-input>
          </div>
        </div>
        <template v-if="false">
          <div class="form-title mgt20">运输类型设置:</div>
          <div class="form-item">
            <div class="transfer-content">
              <div class="transfer-index">方式</div>
              <div class="transfer-name">前台显示名称</div>
            </div>
            <div
              class="transfer-content"
              v-for="(item,index) in settingForm.transferType"
              :key="index"
            >
              <div class="transfer-index">方式{{index+1}}</div>
              <div class="transfer-name">
                <el-input v-model="settingForm.transferType[index]" style="width: 150px"></el-input>
                <template v-if="index !== 0">
                  <i class="el-icon-remove mgl10 font-red remove-icon" @click="removeTransferType(index)"></i>
                </template>
              </div>
            </div>
            <el-button type="primary" class="" icon="el-icon-plus" @click="addMoreTransferType">添加运输类型</el-button>
          </div>
        </template>

      </div>

      <div>
        <el-button type="primary" size="small" :disabled="saveDeliveryDisableButton" @click="saveSystemSetting" :loading="saveDeliveryLoading">{{ $t('common.save') }}</el-button>
      </div>

    </div>

    <el-dialog
      :visible.sync="saveLogisticsSettingDialog"
      width="800px"
    >
      <div slot="title">
          <span>物流商</span>
      </div>
      <div>
        <el-form label-position="left" label-width="160px" label-suffix=":" :rules="rules" :model="currentForm" ref="currentForm">
          <el-form-item label="物流商">
            {{ logisticsData.logistics_type }}
          </el-form-item>
          <el-form-item label="账号" prop="fedex_account_number">
            <el-input v-model="currentForm.fedex_account_number"></el-input>
          </el-form-item>
          <el-form-item label="API KEY" prop="fedex_api_id">
            <el-input v-model="currentForm.fedex_api_id"></el-input>
            <span style="font-size: 11px; color: #7f7f7f">请联系FedEx账号负责人单独获取该 KEY</span>
          </el-form-item>
          <el-form-item label="SECRET KEY" prop="fedex_api_secret_key">
            <el-input v-model="currentForm.fedex_api_secret_key"></el-input>
            <span style="font-size: 11px; color: #7f7f7f">请联系FedEx账号负责人单独获取该 KEY</span>
          </el-form-item>
          <!--<el-form-item label="TRACE API KEY" prop="fedex_trace_api_id">-->
          <!--  <el-input v-model="currentForm.fedex_trace_api_id"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="TRACE SECRET KEY" prop="fedex_trace_api_secret_key">-->
          <!--  <el-input v-model="currentForm.fedex_trace_api_secret_key"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="平台">
            <el-checkbox
              v-for="platformType in platformTypeList"
              :key="platformType.value"
              :label="platformType.name"
              v-model="checkPlatformTypeList"
              style="width: 150px"
            ></el-checkbox>
          </el-form-item>
          <el-form-item label="取件类型">
            <el-radio v-model="logisticsData.pick_type" :label="1">自行投递</el-radio>
            <el-radio v-model="logisticsData.pick_type" :label="2">请求取件</el-radio>
            <el-radio v-model="logisticsData.pick_type" :label="3">定期取件</el-radio>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="logisticsData.status" :label="1">启用</el-radio>
            <el-radio v-model="logisticsData.status" :label="0">停用</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-button @click="saveLogisticsSettingDialog = false">取消</el-button>
        <el-button @click="saveLogisticsSetting" :loading="saveLoading" type="primary">确认</el-button>
      </div>

    </el-dialog>

    <el-dialog
      :visible.sync="saveIMileLogisticsSettingDialog"
      width="800px"
    >
      <div slot="title">
        <span>物流商</span>
      </div>
      <div>
        <el-form label-position="left" label-width="120px" label-suffix=":" :rules="iMilerules" :model="IMileCurrentForm" ref="IMileCurrentForm">
          <el-form-item label="物流商">
            {{ logisticsData.logistics_type }} <span style="color: red; font-size: 13px;"> (预付费)</span>
          </el-form-item>
          <el-form-item label="企业编码" prop="iMile_customer_id">
            <el-input v-model="IMileCurrentForm.iMile_customer_id"></el-input>
          </el-form-item>
          <el-form-item label="密钥" prop="iMile_secret_key">
            <el-input v-model="IMileCurrentForm.iMile_secret_key"></el-input>
            <span style="font-size: 11px; color: #7f7f7f">企业编码与密钥请在iMile OMS后台中 个人中心-API Key 页面中获取</span>
          </el-form-item>
          <el-form-item label="物流产品编码" prop="iMile_logisticsProductCode">
            <el-input v-model="IMileCurrentForm.iMile_logisticsProductCode"></el-input>
            <span style="font-size: 11px; color: #7f7f7f">logisticsProductCode，请联系iMile负责人单独获取该编码</span>
          </el-form-item>
          <el-form-item label="平台">
            <el-checkbox
              v-for="platformType in platformTypeList"
              :key="platformType.value"
              :label="platformType.name"
              v-model="checkPlatformTypeList"
              style="width: 150px"
            ></el-checkbox>
          </el-form-item>
          <!--<el-form-item label="取件类型">-->
          <!--  <el-radio v-model="logisticsData.pick_type" :label="1">自行投递</el-radio>-->
          <!--  <el-radio v-model="logisticsData.pick_type" :label="2">请求取件</el-radio>-->
          <!--  <el-radio v-model="logisticsData.pick_type" :label="3">定期取件</el-radio>-->
          <!--</el-form-item>-->
          <el-form-item label="状态">
            <el-radio v-model="logisticsData.status" :label="1">启用</el-radio>
            <el-radio v-model="logisticsData.status" :label="0">停用</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-button @click="saveIMileLogisticsSettingDialog = false">取消</el-button>
        <el-button @click="saveIMileLogisticsSetting" :loading="saveLoading" type="primary">确认</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import {deepCopy} from "@/utils";
import {getLogisticsSetting, saveLogisticsSetting, saveDeliveryTimeSetting} from "@/api/setting";
import request from "@/utils/request";

export default {
  name: "index",
  data(){
    return {
      deliveryTime: '',
      copyDeliveryTime: '',
      loading: false,
      saveDeliveryLoading: false,
      data: [],
      saveLoading: false,
      saveLogisticsSettingDialog: false,
      saveIMileLogisticsSettingDialog: false,
      logisticsData:{},
      currentForm:{
        fedex_account_number: '',
        fedex_api_id: '',
        fedex_api_secret_key: '',
        fedex_trace_api_id: '',
        fedex_trace_api_secret_key: '',
      },
      IMileCurrentForm:{
        iMile_customer_id: '',
        iMile_secret_key: '',
        iMile_logisticsProductCode: '',
      },
      settingForm: {
        deliveryTime: '',
        track718Key: '',
        transferType: [],
      },
      copyForm: null,
      platformTypeList: [],
      checkPlatformTypeList: [],
      rules:{
        fedex_account_number: [
          { required: true, message:this.$t('common.pleaseFillIn'), trigger: 'blur' },
        ],
        fedex_api_id: [
          { required: true, message:this.$t('common.pleaseFillIn'), trigger: 'blur' },
        ],
        fedex_api_secret_key: [
          { required: true, message:this.$t('common.pleaseFillIn'), trigger: 'blur' },
        ],
      },
      iMilerules:{
        iMile_customer_id: [
          { required: true, message:this.$t('common.pleaseFillIn'), trigger: 'blur' },
        ],
        iMile_secret_key: [
          { required: true, message:this.$t('common.pleaseFillIn'), trigger: 'blur' },
        ],
        iMile_logisticsProductCode: [
          { required: true, message:this.$t('common.pleaseFillIn'), trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.getData();
  },
  computed:{
    saveDeliveryDisableButton(){
      return JSON.stringify(this.copyForm) === JSON.stringify(this.settingForm)
    }
  },
  methods: {
    getData(){
      this.loading = true;
      getLogisticsSetting()
        .then(res=>{
          this.platformTypeList = res.info.platformTypeList
          this.checkPlatformTypeList = res.info.checkPlatformTypeList
          this.copyCheckPlatformTypeList = deepCopy(this.checkPlatformTypeList)
          // this.deliveryTime = res.info.delivery_time
          // this.copyDeliveryTime = deepCopy(this.deliveryTime)
          this.data = res.data
          this.loading = false;
          this.settingForm = deepCopy(res.info.settingData)
          this.setCopyForm()
        })
    },
    setCopyForm() {
      this.copyForm = deepCopy(this.settingForm)
    },
    handleInput(value) {
      // 移除非数字字符
      this.deliveryTime = value.replace(/[^\d]/g, '');
    },
    saveSystemSetting(){
      this.saveDeliveryLoading = true
      request({
        url: '/setting/saveSystemSetting',
        method: 'put',
        data: this.settingForm,
        handleError: true
      })
        .then(res=>{
          this.saveDeliveryLoading = false
          if(res.error === 0){
            this.$successMessage(res.message)
            this.getData()
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    saveDeliveryTime() {
      this.saveDeliveryLoading = true
      saveDeliveryTimeSetting({deliveryTime: this.deliveryTime})
        .then(res=>{
          this.saveDeliveryLoading = false
          if(res.error === 0){
            this.$successMessage(res.message)
            this.getData()
          }else{
            this.$errorMessage(res.message)
          }
        })

    },

    saveData(row){
      this.saveLogisticsSettingDialog = true
      this.logisticsData = deepCopy(row)
      if (this.logisticsData.platform_logistics_list === null) {
        this.checkPlatformTypeList = deepCopy(this.copyCheckPlatformTypeList)
      } else {
        this.checkPlatformTypeList = deepCopy(this.logisticsData.platform_logistics_list)
      }
      this.currentForm.fedex_account_number = this.logisticsData.fedex_account_number
      this.currentForm.fedex_api_id = this.logisticsData.fedex_api_id
      this.currentForm.fedex_api_secret_key = this.logisticsData.fedex_api_secret_key
      this.currentForm.fedex_trace_api_id = this.logisticsData.fedex_trace_api_id
      this.currentForm.fedex_trace_api_secret_key = this.logisticsData.fedex_trace_api_secret_key
    },

    saveLogisticsSetting(){
      this.$refs.currentForm.validate(valid =>{
        if(valid){
          this.saveLoading = true
          this.logisticsData.fedex_account_number = this.currentForm.fedex_account_number
          this.logisticsData.fedex_api_id = this.currentForm.fedex_api_id
          this.logisticsData.fedex_api_secret_key = this.currentForm.fedex_api_secret_key
          this.logisticsData.fedex_trace_api_id = this.currentForm.fedex_trace_api_id
          this.logisticsData.fedex_trace_api_secret_key = this.currentForm.fedex_trace_api_secret_key
          this.logisticsData.platform_logistics_list = this.checkPlatformTypeList
          saveLogisticsSetting(this.logisticsData)
            .then(res=>{
              this.saveLogisticsSettingDialog = false
              this.saveLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    },

    saveIMileData(row){
      this.saveIMileLogisticsSettingDialog = true
      this.logisticsData = deepCopy(row)
      if (this.logisticsData.platform_logistics_list === null) {
        this.checkPlatformTypeList = deepCopy(this.copyCheckPlatformTypeList)
      } else {
        this.checkPlatformTypeList = deepCopy(this.logisticsData.platform_logistics_list)
      }
      this.IMileCurrentForm.iMile_customer_id = this.logisticsData.iMile_customer_id
      this.IMileCurrentForm.iMile_secret_key = this.logisticsData.iMile_secret_key
      this.IMileCurrentForm.iMile_logisticsProductCode = this.logisticsData.iMile_logisticsProductCode
    },

    saveIMileLogisticsSetting(){
      this.$refs.IMileCurrentForm.validate(valid =>{
        if(valid){
          this.saveLoading = true
          this.logisticsData.iMile_customer_id = this.IMileCurrentForm.iMile_customer_id
          this.logisticsData.iMile_secret_key = this.IMileCurrentForm.iMile_secret_key
          this.logisticsData.iMile_logisticsProductCode = this.IMileCurrentForm.iMile_logisticsProductCode
          this.logisticsData.platform_logistics_list = this.checkPlatformTypeList
          saveLogisticsSetting(this.logisticsData)
            .then(res=>{
              this.saveIMileLogisticsSettingDialog = false
              this.saveLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    },
    // 添加更多的运输类型
    addMoreTransferType(){
      this.settingForm.transferType.push('')
    },
    removeTransferType(index){
      this.settingForm.transferType.splice(index,1)
    }
  }
}
</script>
<style lang="scss">
.form-box{
  .el-form-item__label {
    color: #000000;
    font-weight: bold;
    font-size: 15px;
  }
}
</style>

<style scoped lang="scss">
.wrap {
  .footer{
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }
  padding: 10px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
    .header-tips{
      font-size: 14px;
    }
    .form{
      margin-top: 30px;
    }
  }
  .form-box{
    border-radius: 2px;
    border: 1px solid #f2f2f2;
    padding: 15px 20px;
    margin-bottom: 20px;
    .form-title{
      font-weight: bold;
      font-size: 18px;
      //color: #ff0000;
      margin-bottom: 10px;
    }
    .form-label{
      display: inline-block;

    }
    .form-input{
      display: inline-block;
      width: 60%;
    }
    .transfer-content{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 300px;
      margin-bottom: 10px;
      align-items: center;
      .transfer-index{
        width: 30%;
      }
      .transfer-name{
        width: 60%;
        .remove-icon{
          font-size: 20px;
          cursor: pointer;
        }
      }
    }
    .header-tips{
      font-weight: 500;
      color: #FF0000;
    }
    .form-content{
      display: flex;
      flex-direction: row;
      align-items: flex-start;
    }
  }
}
</style>
